<!DOCTYPE html>
<html>

<head>
	@@include('../_include/common-header.html')
	<link rel="stylesheet" type="text/css" href="css/main.min.css" />
</head>

<body class="hidden">
	@@include('../_include/navigation.html',{"Joinus":"active"})

	<div class="joinus-box">
		<div class="third-people"> <img src="images/third-people.png" alt="我们是第三类人群"> </div>
		<div class="joinus-content">
			<!-- <p>江南造船厂</p>
			<p>一起来吧，将生命浪费在美好的工作上！</p>
				<p>我们的客户先相对稳定，不必做很多无聊的比稿</p>
				<p>有完整的时间做项目规划，专注做事</p>
				<p>我们没有办公室政治，不必担心会遭人排挤</p>
				<p>大家可以全力施展自己的才华，把事做正确</p>
				<p>我们一起加班、一起听音乐，一起玩游戏
					当然也会一起被客户蹂躏</p>
				<p>我们在一起，痛并快乐着！</p> -->
			<p><span id="text-container"></span><span id="printCursor" class="print-cursor" style="opacity: 1;">_</span></p>
			<!-- <p><span id="text-container2"></span><span id="printCursor2" class="print-cursor">_</span></p> -->
			<p><span id="text-container3"></span><span id="printCursor3" class="print-cursor">_</span></p>
			<p><span id="text-container4"></span><span id="printCursor4" class="print-cursor">_</span></p>
			<p><span id="text-container5"></span><span id="printCursor5" class="print-cursor">_</span></p>
			<p><span id="text-container6"></span><span id="printCursor6" class="print-cursor">_</span></p>
			<p><span id="text-container7"></span><span id="printCursor7" class="print-cursor">_</span></p>
			<a href="#" class="join-us" title="加入我们">
				<img src="images/join-us.png" alt="加入我们">
			</a>
		</div>
		<div class="bg"></div>
	</div>

	<div class="bot-link J-contact">突破极限 续写传奇</div>

	<!-- 联系我们弹框模块 start -->
	@@include('../_include/contact-pop.html')
	<!-- // 联系我们弹框模块 end -->

	<script type="text/javascript" src="third/jquery-2.1.4.min.js"></script>
	<script src="third/gsap3.11.5/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/TextPlugin.min.js"></script>
	<script src="third/stars.js"></script>
	<script src="js/common.min.js"></script>

	<script>
		$(function () {

			var tl = gsap.timeline({ defaults: { duration:3, ease: "power1.out" } });

			// .to("#text-container2",{
			// 	text: {
			// 		value: '我们的客户先相对稳定，不必做很多无聊的比稿', // 要显示的文本 //Hello, ScrambleText!
			// 		scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
			// 	},
			// 	onComplete: () => {
			// 		//console.log('打印完成')
			// 		document.querySelector('#printCursor2').style.opacity = 0
			// 		document.querySelector('#printCursor3').style.opacity = 1
			// 	}
			// })

			tl.to("#text-container",{
				duration:2,
				text: {
					value: '一起来吧，将生命浪费在美好的工作上！', // 要显示的文本 //Hello, ScrambleText!
					scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
				},
				onComplete: () => {
					//console.log('打印完成')
					document.querySelector('#printCursor').style.opacity = 0
					document.querySelector('#printCursor2').style.opacity = 1
				}
			}).to("#text-container3",{
				text: {
					value: '有完整的时间做项目规划，专注做事', // 要显示的文本 //Hello, ScrambleText!
					scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
				},
				onComplete: () => {
					//console.log('3打印完成')
					document.querySelector('#printCursor3').style.opacity = 0
					document.querySelector('#printCursor4').style.opacity = 1
				}
			}).to("#text-container4",{
				text: {
					value: '我们没有办公室政治，不必担心会遭人排挤', // 要显示的文本 //Hello, ScrambleText!
					scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
				},
				onComplete: () => {
					//console.log('4打印完成')
					document.querySelector('#printCursor4').style.opacity = 0
					document.querySelector('#printCursor5').style.opacity = 1
				}
			}).to("#text-container5",{
				text: {
					value: '大家可以全力施展自己的才华，把事做正确', // 要显示的文本 //Hello, ScrambleText!
					scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
				},
				onComplete: () => {
					//console.log('5打印完成')
					document.querySelector('#printCursor5').style.opacity = 0
					document.querySelector('#printCursor6').style.opacity = 1
				}
			}).to("#text-container6",{
				duration:4,
				text: {
					value: '我们一起加班、一起听音乐，一起玩游戏当然也会一起被客户蹂躏', // 要显示的文本 //Hello, ScrambleText!
					scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
				},
				onComplete: () => {
					//console.log('6打印完成')
					document.querySelector('#printCursor6').style.opacity = 0
					document.querySelector('#printCursor7').style.opacity = 1
				}
			}).to("#text-container7",{
				duration:2,
				text: {
					value: '我们在一起，痛并快乐着！', // 要显示的文本 //Hello, ScrambleText!
					scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
				},
				onComplete: () => {
					//console.log('7打印完成')
					document.querySelector('#printCursor7').style.opacity = 0
				}
			}).to(".third-people",{
				duration:10,
				opacity:0.2,
				delay:-16,				
				onComplete: () => {
					console.log('我们是第三类人群隐藏')				
				}
			}).to(".join-us",{
				duration:2,
				opacity:1,
				scale:1,				
				onComplete: () => {
					console.log('加入我们显示')				
				}
			}).from(".bg",{
				duration:18,
				scale:2,
				delay:-20,
				onComplete: () => {
					console.log('背景缩放动画完成')				
				}
			})

		})
	</script>

</body>

</html>